import React from 'react';
import {App, Button, Form, Space, Spin} from "antd";
import Entity from "../../type/Entity";
import {FormInstance} from "antd/lib";
import TextArea from "antd/es/input/TextArea";
import {useNavigate} from "react-router-dom";
import {Dispatch} from "@reduxjs/toolkit";
import {useAppDispatch} from "../../redux/hook";

interface ProFormProps<T extends Entity> {
    /**
     * 表单的子组件
     */
    children?: React.ReactNode,
    /**
     * 提交按钮的文本
     */
    submitText?: string,

    /**
     * 表单的实例
     */
    form?: FormInstance<T>,
    /**
     * 表单数据的初始值
     */
    initialValues?: Partial<T> ,
    /**
     * 表单提交的回调函数
     * @param value 表单数据
     */
    submit: (value: T,disptch: Dispatch ) => Promise<boolean> ;
    /**
     * 提交成功的消息
     */
    submitSuccessMessage?: string ;
    /**
     * 提交失败的消息
     */
    submitFailureMessage?: string ;
    /**
     * 提交成功后跳转的URL
     */
    submitSuccessToUrl?: string ;

    /**
     * 表单数据初始化转换
     * @param data 表单数据
     */
    formConvert?: (data: Partial<T>) => Partial<T> ;
    /**
     * 表单数据提交前转换
     * @param data 表单数据
     */
    dataConvert?: (data: Partial<T>) => Partial<T> ;
    /**
     * 是否禁用提交按钮
     */
    disabledSubmit?: boolean ;
}


const ProForm = <T extends Entity> (props: ProFormProps<T>) => {

    const [loading, setLoading] = React.useState<boolean>(false) ;
    const [form] = Form.useForm() ;
    const { message } = App.useApp() ;
    const navigate = useNavigate() ;
    const dispatch = useAppDispatch() ;
    const onReset = () => {

    } ;
    const onFinish = async (value: T) => {
        setLoading(true) ;
        let res = await props.submit(value,dispatch) ;
        if (res){
            message.success(props.submitSuccessMessage ?? "提交成功") ;
            if (props.submitSuccessToUrl){
                navigate(props.submitSuccessToUrl) ;
            }
        }else {
            message.warning("提交失败") ;
        }
        setLoading(false) ;
    } ;
    return (
        <Spin
            spinning={loading}
            tip={"正在提交数据..."}
            delay={500}
        >
            <Form<T>
                layout={"horizontal"}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
                form={props.form}
                initialValues={props.initialValues}
                onFinish={onFinish}
            >
                {props.children}
                <Form.Item<Entity> label="备注信息" name={"remark"}>
                    <TextArea rows={3} />
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8,span: 16}}>
                    <Space size={10}>
                        <Button disabled={props.disabledSubmit} type="primary" htmlType="submit">{props.submitText || "提交" }</Button>
                        <Button type="default" htmlType="reset" onReset={onReset}>重置</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Spin>
    );
};

export default ProForm;